<template>
  <div class="board">
    <div class="title">票单看板</div>

    <TaskSearch />
    <Task :tasks="store.board.list" v-loading="store.board.loading" />

    <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handlePageChange"
      v-model:current-page="store.board.page" v-model:page-size="store.board.pageSize" layout="total, prev, pager, next, "
      :total="store.board.total" />
  </div>
</template>
<script setup>
import TaskSearch from './TaskSearch.vue'
import Task from './Task.vue'

const { store } = inject('/home')

const handleSizeChange = () => {
  store.getBoardList()
}

const handlePageChange = () => {
  store.getBoardList()
}
</script>
<style lang="scss" scoped>
.board {
  flex: 1;
  overflow: hidden;
  padding-left: 12px;
  display: flex;
  flex-direction: column;
}

.title {
  margin-bottom: 16px;
  color: #252a30;
  font-size: 20px;
  font-weight: 600;
}

.pagination {
  padding: 20px 0;
  display: flex;
  justify-content: center;
}
</style>
